
<template>
  <div class="content">
    <el-scrollbar max-height="100vh">
      <el-row :gutter="10">
        <el-col
          :span="6"
          v-for="item in componentArray"
        >
          <div
            class="echatr_card"
            @click="changeCard(item)"
          >
            <label class="title">{{ item.label }}</label>
            <component :is="currentComponent(item)"></component>
          </div>
        </el-col>
      </el-row>
    </el-scrollbar>
    <div
      class="echart_dialog"
      v-if="visible"
    >
      <Modal @on-close="changeCard"></Modal>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { componentArray, currentComponent } from './context'
import Modal from './components/model/echartDialog.vue'

const visible = ref<boolean>(false)

/** 卡片点击事件 */
const changeCard = (item?: { key: number, label: string }) => {
  console.log(item)
  // visible.value = !visible.value
}

</script>

<style scoped lang="scss">
.content {
  position: relative;
  width: 100%;
  height: 100%;

  .el-row {
    width: 100%;
    height: 100%;

    .echatr_card {
      width: 100%;
      height: 400px;
      margin: 5px 0;
      border: 1px solid #f5e5e8;
      position: relative;
      text-align: center;

      .title {
        color: #F72C5B;
        position: absolute;
        z-index: 1;
        bottom: 5px;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }

  .echart_dialog {
    background: #ffffff;
    position: absolute;
    right: 0;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 3;
  }
}
</style>

<route>
  {
    path:'/individuation',
    name: 'Individuation',
  }
</route>./context